<template>
  <div class="accountManage">
    <!--账号管理---------面包屑-->
    <a-breadcrumb style="text-align: left;font-size: 16px;margin-left: 15px;margin-bottom: -10px">
      <a-breadcrumb-item>首页</a-breadcrumb-item>
      <a-breadcrumb-item>数据管理</a-breadcrumb-item>
      <a-breadcrumb-item>场馆查询</a-breadcrumb-item>
    </a-breadcrumb>
    <!--账号管理---------分割线-->
    <a-divider/>
    <!--账号管理---------新增表单-->
    <div class="btn">
      <div class="right">
        <a-button type="danger" @click="showModal">新增</a-button>
      </div>
      <a-modal width="900px" v-model="visible" :maskClosable="false" :closable="false">
        <template slot="footer">
          <a-button key="clear" @click="onClear">清空</a-button>
          <a-button key="back" @click="onCancel">取消</a-button>
          <a-button key="submit" type="primary" @click="onSubmit">提交</a-button>
        </template>
        <a-form-model :model="form" :label-col="{span: 7}" :wrapper-col="{span: 16}">
          <a-tabs default-active-key="1" @change="callback">
            <a-tab-pane key="1" tab="基本信息">
              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="场馆名称：">
                    <a-input v-model="form.vName" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="场馆介绍：">
                    <a-input v-model="form.vIntroduction" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="所在市区：">
                    <a-input v-model="form.vCity" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="地址：">
                    <a-input v-model="form.vAdress" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="预约电话：">
                    <a-input v-model="form.vPhone" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="星级：">
                    <a-input v-model="form.vStar" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="预约价格：">
                    <a-input v-model="form.vPrice" />
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="上传预览图：">
                    <!--style="display: none"-->
                    <a-input v-model="form.preview" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'preview')"
                      :fileList="form.preview"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="预览：">
                    <img style="width: 140px;height: 180px" :src="form.preview" alt="">
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="2" tab="轮播展示" force-render>
              <a-row>
                <a-col :span="12">
                  <a-form-model-item label="轮播图一：">
                    <a-input style="display: none" v-model="form.carousel1" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'carousel1')"
                      :fileList="form.carousel1"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="预览：">
                    <img style="width: 160px;height: 120px" :src="form.carousel1" alt="">
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-model-item label="轮播图二：">
                    <a-input style="display: none" v-model="form.carousel2" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'carousel2')"
                      :fileList="form.carousel2"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="预览：">
                    <img style="width: 160px;height: 120px" :src="form.carousel2" alt="">
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-model-item label="轮播图三：">
                    <a-input style="display: none" v-model="form.carousel3" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'carousel3')"
                      :fileList="form.carousel3"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="预览：">
                    <img style="width: 160px;height: 120px" :src="form.carousel3" alt="">
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12">
                  <a-form-model-item label="轮播图一：">
                    <a-input style="display: none" v-model="form.carousel4" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'carousel4')"
                      :fileList="form.carousel4"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="12">
                  <a-form-model-item label="预览：">
                    <img style="width: 160px;height: 120px" :src="form.carousel4" alt="">
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-tab-pane>
            <a-tab-pane key="3" tab="详情介绍">
              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="详情图一：">
                    <a-input style="display: none" v-model="form.details1" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'details1')"
                      :fileList="form.details1"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="预览：">
                    <img style="width: 160px;height: 120px" :src="form.details1" alt="">
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="文本一：">
                    <a-input style="height: 150px" v-model="form.desc1" type="textarea" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="详情图一：">
                    <a-input style="display: none" v-model="form.details2" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'details2')"
                      :fileList="form.details2"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="预览：">
                    <img style="width: 160px;height: 120px" :src="form.details2" alt="">
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="文本一：">
                    <a-input style="height: 150px" v-model="form.desc2" type="textarea" />
                  </a-form-model-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="8">
                  <a-form-model-item label="详情图一：">
                    <a-input style="display: none" v-model="form.details3" :disabled="true"/>
                    <a-upload-dragger
                      name="file"
                      @change="handleChange($event, 'details3')"
                      :fileList="form.details3"
                    >
                      <p class="ant-upload-drag-icon">
                        <a-icon type="inbox" />
                      </p>
                      <p class="ant-upload-text">
                        点击或拖拽文件到这里上传
                      </p>
                    </a-upload-dragger>
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="预览：">
                    <img style="width: 160px;height: 120px" :src="form.details3" alt="">
                  </a-form-model-item>
                </a-col>
                <a-col :span="8">
                  <a-form-model-item label="文本一：">
                    <a-input style="height: 150px" v-model="form.desc3" type="textarea" />
                  </a-form-model-item>
                </a-col>
              </a-row>
            </a-tab-pane>
          </a-tabs>
        </a-form-model>
      </a-modal>
    </div>
    <!--系统管理---------账号数据列表-->
    <a-table :columns="columns" :data-source="data" :loading="loadFlag" :pagination="false" :bordered="true">
      <span slot="venue_status" slot-scope="text, record">
        <a-switch checked-children="开放" un-checked-children="闭馆"
          :checked="Boolean(record.venue_status === '1')"/>
      </span>
    </a-table>
    <!--系统管理---------分页器-->
    <div class="pagination">
      <a-locale-provider :locale="zhCN">
        <a-pagination
          v-model="pageIndex"
          :total="total"
          :show-total="total => `共 ${total} 条数据`"
          :page-size="pageSize"
          @showSizeChange="onShowSizeChange"
          @change="pageChange"
        >
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-locale-provider>
    </div>
  </div>
</template>

<script>
import zhCN from 'ant-design-vue/es/locale-provider/zh_CN'
import qs from 'qs'
import {addVenue, getVenue} from '../http/api'
const columns = [
  {
    title: '序号',
    dataIndex: 'venue_id',
    align: 'center',
    width: 80
  }, {
    title: '名称',
    dataIndex: 'venue_name',
    align: 'center',
    width: 80
  }, {
    title: '地址',
    dataIndex: 'venue_city',
    align: 'center',
    width: 80
  }, {
    title: '电话',
    dataIndex: 'venue_phone',
    align: 'center',
    width: 80
  }, {
    title: '均分',
    dataIndex: 'venue_star',
    align: 'center',
    width: 80
  }, {
    title: '价格',
    dataIndex: 'venue_price',
    align: 'center',
    width: 80
  }, {
    title: '状态',
    dataIndex: 'venue_status',
    scopedSlots: {customRender: 'venue_status'},
    align: 'center',
    width: 80
  }
]
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
export default {
  inject: ['reload'],
  data() {
    return {
      // 表格加载判断
      loadFlag: false,
      // 表格字段
      columns,
      data: null,
      // formModel 表单默认数据
      form: {
        vName: null,
        vIntroduction: null,
        vCity: null,
        vAdress: null,
        vPhone: null,
        vStar: null,
        vPrice: null,
        preview: null,
        carousel1: null,
        carousel2: null,
        carousel3: null,
        carousel4: null,
        details1: null,
        details2: null,
        details3: null,
        desc1: null,
        desc2: null,
        desc3: null
      },
      // formModel 表单开关判断
      visible: false,
      // 组件汉化
      zhCN,
      // 分页器数据
      total: 0,
      pageIndex: 1,
      pageSize: 6,
      picsBase64: ''
    }
  },
  methods: {
    // 获取教练数据
    async getVenue() {
      await getVenue({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      }).then(res => {
        this.data = res.data.data
        this.total = res.data.total
        // 加载动作
        setTimeout(() => {
          this.loadFlag = false
        }, 100)
      })
    },
    // 打开 Model 对话框
    showModal() {
      this.visible = true
      this.loadFlag = true
      this.onClear()
    },
    // 关闭 Model 对话框
    onCancel() {
      this.visible = false
      this.loadFlag = false
    },
    // 清空model表单
    onClear() {
      this.form = {
        vName: null,
        vIntroduction: null,
        vCity: null,
        vAdress: null,
        vPhone: null,
        vStar: null,
        vPrice: null,
        preview: null,
        carousel1: null,
        carousel2: null,
        carousel3: null,
        carousel4: null,
        details1: null,
        details2: null,
        details3: null,
        desc1: null,
        desc2: null,
        desc3: null
      }
    },
    // 处理上传图片
    async handleChange(info, val) {
      const isJpgOrPng = info.file.type === "image/jpeg" || info.file.type === "image/png"
      const isLt2M = info.file.size / 1024 / 1024 < 2
      if (!isJpgOrPng) this.$message.error("你只能上传jpg跟png类型的图片!")
      else {
        if (!isLt2M) this.$message.error("图片大小不能超过10MB!")
        else {
          for (let i in info.fileList) { this.form[val] = await getBase64(info.fileList[i].originFileObj) }
        }
      }
    },
    // 注册账号提交表单
    onSubmit() {
      addVenue(qs.stringify(this.form)).then(res => {
        this.$message.success(res.msg)
        this.loadFlag = false
        this.reload()
      })
    },
    // 分页函数-点击换页函数
    pageChange(current, pageSize) {
      this.pageIndex = current
      this.pageSize = pageSize
      this.getVenue()
    },
    // 分页函数-每页显示条目函数
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.getVenue()
    }
  },
  created() {
    this.loadFlag = true
    this.getVenue()
  }
}
</script>
<style lang="less" scoped>
.right {
  text-align: left;
  margin: 15px 20px;
}

.pagination {
  margin: 15px 20px;
  text-align: right
}

img {
  width: 120px;
  height: 70px;
}
</style>
